<template>
  <div class="editor">
    <div class="e-title">{{ data.title }}</div>
    <div class="e-content">
      <d-form :data="data" />
    </div>
  </div>
</template>

<script>
import _cloneDeep from 'lodash/cloneDeep'
import { mapState, mapMutations, mapGetters } from 'vuex'

import DForm from './form'

export default {
  name: 'Editor',
  components: {
    DForm,
  },
  data: () => ({
    data: {},
  }),
  computed: {
    ...mapState(['current', 'components']),
    ...mapGetters(['componentsAttrs', 'selectedSection']),
  },
  watch: {
    current(current) {
      if (current) {
        this.data = {
          attrs: this.componentsAttrs.get(this.selectedSection.name),
          props: this.selectedSection.props,
        }
      } else {
        this.data = {}
      }
    },
    data: {
      deep: true,
      handler(value) {
        if (!value) {
          return
        }
        if (Object.keys(value).length) {
          this.updateProps(_cloneDeep(value.props))
        }
      },
    },
  },
  methods: {
    ...mapMutations(['updateProps']),
  },
}
</script>

<style scoped>
.editor {
  width: 370px;
  height: calc(100vh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
}

.editor::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 3px;
  background-color: #f5f5f5;
}

.editor::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}
.e-content {
  text-align: left;
  padding: 12px;
}

.e-content /deep/ .el-form-item__content {
  text-align: right;
}

.e-content /deep/ textarea {
  display: none;
}

.editor .e-title {
  font-size: 18px;
  padding: 20px 16px;
  border-bottom: 1px solid #f2f4f6;
  color: #323233;
  font-weight: 600;
  text-align: left;
}
</style>
